<!--
 * @Description: 基础配置页面
 * @Author: Fengqin
 * @Date: 2021-06-24 21:13:04
 * @LastEditors: Morgan
 * @LastEditTime: 2021-07-02 20:47:17
-->
<template>
  <div>
    <!-- 添加 -->
    <div>
      <el-button
        class="btn"
        type="primary"
        plain
        @click="toAdd"
      >添加</el-button>
    </div>
    <!-- 表格展示数据 -->
    <div class="list">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="序号" width="220" />
        <el-table-column prop="name" label="名称" width="320" />

        <el-table-column prop="val" label="值" align="center" width="300">
          <template slot-scope="scope">
            <!-- {{scope.row.val}} -->
            <span
              v-if="
                scope.row.val !== null && scope.row.val.indexOf('http://') == -1
              "
            >{{ scope.row.val }}</span>
            <img
              v-else
              :src="scope.row.val"
              style="width: 50px; height: 40px"
            >
          </template>
        </el-table-column>

        <el-table-column prop="introduce" label="介绍" width="320" />
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="toEdit(scope.row)"
            >编辑</el-button>
            <el-button
              type="text"
              size="small"
              class="red_info"
              @click="toDelete(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="zujian">
      选择页面组件大小:
      <!-- <font size="4" height="20px">中等组件大小</font> -->
      <br>
      <el-radio-group v-model="size">
        <el-radio label="medium" @click="toChangeSize"><el-button type="text" size="medium" color="#333">中等大小组件</el-button></el-radio>
        <br>
        <el-radio label="small" @click="toChangeSize"><el-button type="text" size="small" color="#333">小型组件</el-button></el-radio>
        <br>
        <el-radio label="mini" @click="toChangeSize"><el-button type="text" size="mini" color="#333">超小型组件</el-button></el-radio>
        <br>
      </el-radio-group>
    </div>
    <!-- 日历 -->
    <div class="rili">
      <el-calendar v-model="value" />
    </div>
    <!-- 添加的模态框 -->
    <div>
      <el-dialog :title="title" :visible.sync="visible" @close="toClose">
        <el-form
          ref="ruleform"
          :model="form"
          :rules="rules"
          label-width="100px"
          class="demo-form"
        >
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="介绍" prop="introduce">
            <el-input v-model="form.introduce" />
          </el-form-item>

          <el-form-item label="类型" label-width="100px">
            <el-select v-model="type" placeholder="请选择类型">
              <el-option label="文字" value="文字" />
              <el-option label="图片" value="图片" />
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="type === '文字'"
            label="值"
            prop="val"
            label-width="100px"
          >
            <el-input v-model="form.val" />
          </el-form-item>
          <el-form-item
            v-else
            prop="val"
            label="图片上传"
            :label-width="formLabelWidth"
          >
            <el-upload
              class="avatar-uploader"
              :action="uploadFileURL"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.val" :src="form.val" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toSave">确认</el-button>
            <el-button @click="visible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import { findAll, saveOrUpdate, deleteById } from '@/api/baseConfig'
import { showFileURL, uploadFileURL } from '@/utils/config'

export default {
  data() {
    return {
      size: Cookies.get('size'),
      tableData: [],
      // 图标的上传
      showFileURL,
      uploadFileURL,
      form: {},
      type: '文字',
      jubgeHandler: '',
      // 模态框的显示与隐藏
      visible: false,
      // 表单控件标题的宽度
      formLabelWidth: '80px',
      // 模态框的标题
      title: '',
      // 图片
      imageUrl: '',
      rules: {
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }
        ],
        introduce: [
          {
            required: true,
            message: '请输入介绍',
            trigger: 'blur'
          }
        ]
      },
      value: new Date()
    }
  },
  computed: {},
  watch: {
    size(newValue, oldValue) {
      this.toChangeSize(newValue)
    }
  },
  created() {
    this.findAll()
  },
  mounted() {},
  methods: {
    // 设置cookies
    toChangeSize(size) {
      Cookies.set('size', size)
      this.$confirm('是否刷新页面?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          location.reload()
          this.$message({
            type: 'success',
            message: '刷新成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '请稍后手动刷新'
          })
        })
    },
    async findAll() {
      const res = await findAll()
      // console.log(res);
      this.tableData = res.data
    },
    toAdd() {
      this.findAll()
      // 清空表单数据
      this.form = {}
      this.visible = true
      this.title = '新增基础配置'
      this.imageUrl = ''
    },
    //  图片上传成功的回调函数
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.form.val = this.showFileURL + res.data.id
    },
    //  图片上传之前的回调函数
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 重置表单验证
    toClose() {
      this.$refs.ruleform.resetFields()
      // 超时调用,在多少毫秒之后执行这个函数
      // setTimeout(()=>{
      //      this.visible = false;
      // },100)
    },
    // 模态框确定按钮处理程序
    toSave() {
      this.$refs.ruleform.validate(async(valid) => {
        if (valid) {
          // 校验通过，做自己的业务
          // console.log("校验通过");
          const res = await saveOrUpdate(this.form)
          // 提示用户保存成功，关闭模态框
          this.$notify.success({
            title: '成功',
            message: res.success
          })
          this.findAll()
          // this.toClose();
          this.visible = false
        } else {
          // 校验不通过
          return false
        }
      })
    },
    // 编辑按钮
    toEdit(row) {
      this.findAll()
      // 设置表单数据
      this.form = { ...row }
      this.imageUrl = this.form.val
      this.title = '编辑基础配置'
      this.visible = true
    },
    // 删除按钮
    toDelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await deleteById({ id })
          this.findAll()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }

  }
}
</script>
<style scoped>
.list {
  text-align: center;
}
.zujian{
  margin-top: 60px;
  /* float: left; */
  position: absolute;
  width: 40%;
  height: 20%;
  /* line-height: 20px; */
  font-size: 20px;
  margin-left: 250px;
  color: #4fbc8d;
}
.zujian .el-button{
  color:#999
}
.rili{
  /* width:800px; */
  width: 400px;
  /* height: 200px; */
  float: right;
  margin-top: 40px;
  /* margin-left: 30px; */
  margin-right: 200px;
  /* size: mini; */

}
/* .el-calendar-table .el-calendar-day{
  height: 42px;
} */
.el-calendar-table .el-calendar-day {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 8px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}
.el-calendar-table .el-calendar-day{
  height: 42px;
}
</style>
